import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import Qt.labs.controls 1.0
import QtQuick.XmlListModel 2.0
import "../template" as Template
import "../js/AttendCarTNavigator.qml.js" as Ln

Template.Navigator {
    id: nav
    title: "练车报名"


    SystemPalette {
        id: systemPalette
    }

    XmlListModel {
        id: xmlModel
        source: http.build("/attend.xml", {})
        query: "/attends/attend"

        XmlRole { name: "name"; query: "name/string()" }
        XmlRole { name: "date"; query: "date/string()" }
        XmlRole { name: "time"; query: "time/string()" }
        XmlRole { name: "mobile"; query: "mobile/string()" }
        XmlRole { name: "description"; query: "description/string()" }

        function events(date) {
            for (var i = 0; i < xmlModel.count; i++) {

                if (xmlModel.get(i).date == date)
                    return true
            }
            return false
        }

        onStatusChanged: {
            if (xmlModel.status == XmlListModel.Ready) {
                calendar.selectChanged()
            }
        }
    }

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: parent.width
        contentHeight:720

        ScrollIndicator.vertical: ScrollIndicator { }

    ColumnLayout {
        anchors.fill: parent
        spacing: 12
        anchors.margins: 9


        Calendar {
            id: calendar
            weekNumbersVisible: false

            Layout.fillWidth: true
            Layout.preferredHeight: implicitHeight * 1.2
            style: CalendarStyle {
                dayDelegate: Item {
                    readonly property color sameMonthDateTextColor: "#444"
                    readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : systemPalette.highlight
                    readonly property color selectedDateTextColor: "white"
                    readonly property color differentMonthDateTextColor: "#bbb"
                    readonly property color invalidDatecolor: "#dddddd"

                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                    }

                    Image {
                        visible: xmlModel.events(Qt.formatDate(styleData.date, "yyyy-MM-dd"))
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.margins: -1
                        width: 12
                        height: width
                        source: "../images/eventindicator.png"
                    }

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        color: {
                            var color = invalidDatecolor;
                            if (styleData.valid) {
                                // Date is within the valid range.
                                color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                                if (styleData.selected) {
                                    color = selectedDateTextColor;
                                }
                            }
                            color;
                        }
                    }
                }
            }
            onSelectedDateChanged: {

                selectChanged()
            }

            function selectChanged() {

                listModel.clear()
                var date = Qt.formatDate(calendar.selectedDate, "yyyy-MM-dd")

                for (var i = 0; i < xmlModel.count; i++) {
                    var obj = xmlModel.get(i)
                    if (obj.date == date) {
                        listModel.append({xindex: i, name: obj.name, time: obj.time,
                                             mobile: obj.mobile,
                                             description: obj.description})
                    }

                }
                return false
            }
        }



        ListView {
            id: listview
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            header: Item {
                width: listview.width
                height: 48

                Label {
                    text: "报名参数人数详情"
                    font.pixelSize: 19
                    anchors.horizontalCenter: parent.horizontalCenter
                    height: parent.height
                    verticalAlignment: Text.AlignVCenter
                }

                Rectangle {
                    height: 1
                    width: listview.width / 3 * 2
                    color: "red"
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            model: ListModel{
                id: listModel
            }

            delegate: ItemDelegate {
                width: listview.width
                height: 128
                Column {
                    spacing: 12
                    anchors.verticalCenter: parent.verticalCenter
                    Label {
                        text: "姓名：" + name
                    }
                    Label {
                        text: "电话：" + mobile
                    }

                    Label {
                        text: "时间：" + time
                    }
                    Label {
                        text: "描述：" +description
                    }
                }

                Rectangle {
                    height: 1
                    color: "darkseagreen"
                    width: parent.width
                    anchors.bottom: parent.bottom
                }
            }


        }
    }
}
}
